<template>
  <div>
      <back></back>
    <div id="main8"></div>
    <div id="updatetime">更新时间:{{ updatetime }}</div>
    <div style="clear: both"></div>
    <el-row :gutter="10">
      <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8"
        ><div id="data" class="grid-content bg-purple"></div
      ></el-col>
      <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8"
        ><div id="data2" class="grid-content bg-purple-light"></div
      ></el-col>
      <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8"
        ><div id="data3" class="grid-content bg-purple bigdata">
          <div>累计确诊:{{ total.curedNum }}</div>
          <div>现有确诊总人数:{{ total.confirmedNum }}</div>
          <div>累计死亡人数:{{ total.deadNum }}</div>
          <div>累计境外输入:{{ total.externalConfirmedNum }}</div>
        </div></el-col
      >
    </el-row>
  </div>
</template>
<script>
import Api from "../utill/Api.config.js";
import china from "../utill/china.js";
import Back from '../components/back.vue';
export default {
   components:{
    back:Back
  },
  mounted() {
    this.getData();
    document.body.style.backgroundImage = this.bodyBgImage;
  },
  beforeDestroy() {
    // 离开页面的时候清除
    document.body.style.backgroundImage = "";
  },
  methods: {
    initMap(context) {
      var myChart8 = context.$echarts.init(document.getElementById("main8"));
      var valueArray = [];
      for (var i = 0; i < context.$data.province.length; i++) {
        var map = {};
        map.value = context.$data.province[i].currentConfirmedNum;
        map.name = context.$data.province[i].provinceName;
        valueArray[i] = map;
      }
      var optionMap = {
        backgroundColor: "",
        title: {
          text: "按地域分布统计，现有新冠确诊人数",
          subtext: "",
          x: "center",
          textStyle: {
            color: "#ffffff",
          },
        },
        tooltip: {
          trigger: "item",
        },
        //左侧小导航图标
        visualMap: {
          show: true,
          x: "left",
          y: "center",
          min: 0,
          max: 100,
          color: ["#DC143C", "#FFC0CB", "#FFB6C1", "#ffffff"],
        },
        //配置属性
        series: [
          {
            name: "数据",
            type: "map",
            map: "china",
            roam: true,
            label: {
              normal: {
                show: true, //省份名称
              },
              emphasis: {
                show: false,
              },
            },
            data: valueArray, //数据
          },
        ],
      };
      //初始化echarts实例
      //使用制定的配置项和数据显示图表
      myChart8.setOption(optionMap);
    },
    getData() {
      var Vue = this;
      this.axios
        .get(Api.COVID.gettoday())
        .then((response) => {
          this.total = response.data.showapi_res_body.todayStatictic;
          this.province = response.data.showapi_res_body.todayDetailList.map(
            (obj) => {
              var reg = /台湾|广西壮族自治区|宁夏回族自治区|香港|澳门|西藏自治区|省$|市$|新疆维吾尔自治区/;
              if (
                obj.provinceName == "黑龙江省" ||
                obj.provinceName == "内蒙古自治区"
              ) {
                obj.provinceName = obj.provinceName.substr(0, 3);
              } else if (reg.test(obj.provinceName)) {
                obj.provinceName = obj.provinceName.substr(0, 2);
              }
              return obj;
            }
          );
          this.updatetime = response.data.showapi_res_body.updateTime;
        })
        .then(function () {
          Vue.initMap(Vue);
          Vue.initBar(Vue);
          Vue.initBar2(Vue);
        });
    },
    initBar(context) {
      var p = [];
      var d = [];
      for (var item of context.province) {
        p.push(item.provinceName);
        d.push(item.currentConfirmedNum);
      }
      var myChart = context.$echarts.init(document.getElementById("data"));
      // 指定图表的配置项和数据
      var option = {
        title: {
          text: "今日确诊",
          textStyle: {
            color: "#ffffff",
          },
        },
        tooltip: {},
        xAxis: {
          data: p,
          axisLine: {
            // 坐标轴线       // 默认显示，属性show控制显示与否
            lineStyle: {
              // 属性lineStyle控制线条样式
              color: "#fff",
            },
          },
        },
        yAxis: {
          axisLine: {
            // 坐标轴线       // 默认显示，属性show控制显示与否
            lineStyle: {
              // 属性lineStyle控制线条样式
              color: "#fff",
            },
          },
        },
        series: [
          {
            name: "人数",
            type: "bar",
            data: d,
            itemStyle: {
              normal: {
                color: "red",
              },
            },
          },
        ],
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
    initBar2(context) {
      var p = [];
      var d = [];
      for (var item of context.province) {
        p.push(item.provinceName);
        d.push(item.confirmedNum);
      }
      var myChart = context.$echarts.init(document.getElementById("data2"));
      // 指定图表的配置项和数据
      var option = {
        title: {
          text: "总确诊",
          textStyle: {
            color: "#ffffff",
          },
        },
        tooltip: {},
        xAxis: {
          data: p,
          axisLine: {
            // 坐标轴线       // 默认显示，属性show控制显示与否
            lineStyle: {
              // 属性lineStyle控制线条样式
              color: "#fff",
            },
          },
        },
        yAxis: {
          axisLine: {
            // 坐标轴线       // 默认显示，属性show控制显示与否
            lineStyle: {
              // 属性lineStyle控制线条样式
              color: "#fff",
            },
          },
        },
        series: [
          {
            name: "人数",
            type: "bar",
            data: d,
            itemStyle: {
              normal: {
                color: "red",
              },
            },
          },
        ],
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
  },
  data() {
    return {
      total: {},
      province: [],
      updatetime: "",
      bodyBgImage: "url(" + require("../assets/bigdata.jpg") + ")",
    };
  },
};
/**function randomData() {
  return Math.round(Math.random() * 20);
}
 var mydata = [
  { name: "北京", value: 16 },
  { name: "天津", value: 2 },
  { name: "上海", value: 13 },
  { name: "重庆", value: randomData() },
  { name: "河北", value: randomData() },
  { name: "河南", value: randomData() },
  { name: "云南", value: randomData() },
  { name: "辽宁", value: randomData() },
  { name: "黑龙江", value: randomData() },
  { name: "湖南", value: randomData() },
  { name: "安徽", value: randomData() },
  { name: "山东", value: randomData() },
  { name: "新疆", value: randomData() },
  { name: "江苏", value: randomData() },
  { name: "浙江", value: randomData() },
  { name: "江西", value: randomData() },
  { name: "湖北", value: randomData() },
  { name: "广西", value: randomData() },
  { name: "甘肃", value: randomData() },
  { name: "山西", value: randomData() },
  { name: "内蒙古", value: randomData() },
  { name: "陕西", value: randomData() },
  { name: "吉林", value: randomData() },
  { name: "福建", value: randomData() },
  { name: "贵州", value: randomData() },
  { name: "广东", value: randomData() },
  { name: "青海", value: randomData() },
  { name: "西藏", value: randomData() },
  { name: "四川", value: randomData() },
  { name: "宁夏", value: randomData() },
  { name: "海南", value: randomData() },
  { name: "台湾", value: randomData() },
  { name: "香港", value: randomData() },
  { name: "澳门", value: randomData() }
];*/
</script>
<style>
body {
}
#updatetime {
  color: white;
  text-align: center;
}
#data3 {
  line-height: 90px;
  font-size: 30px;
  text-align: center;
}
.bigdata {
  color: white;
}
.el-col {
  border-radius: 4px;
}
.grid-content {
  border-radius: 4px;
  min-height: 450px;
}
#main8 {
height: 400px;
width: 100%;
}
</style>
